<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Orange &mdash; Free Website Template, Free HTML5 Template by FreeHTML5.co</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" />
    <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />




    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />
    <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
    <link rel="stylesheet" href="__CSS__/index/animate.css">
    <link rel="stylesheet" href="__CSS__/index/icomoon.css">
    <link rel="stylesheet" href="__CSS__/index/bootstrap.css">
    <link rel="stylesheet" href="__CSS__/index/style.css">
    <script src="__JS__/index/modernizr-2.6.2.min.js"></script>
    <script src="__JS__/index/respond.min.js"></script>

    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <!--<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>-->

    <!-------------------------------------------------------->
    <script src="__JS__/jquery-1.8.3.min.js"></script>
    <script src="__JS__/jssor.slider.min.js"></script>
    <link href="__CSS__/css/style.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/hotel/bootstrap.css" rel='stylesheet' type='text/css' />
    <!--<script src="__CSS__/hotel/jquery.min.js"></script>-->
    <link rel="stylesheet" href="__CSS__/hotel/font-awesome.css">
    <link href="__CSS__/hotel/style.css" rel="stylesheet" type="text/css" media="all" />
    <script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <script src="__CSS__/hotel/easyResponsiveTabs.js"></script>
    <script src="__CSS__/hotel/jquery.easydropdown.js" type="text/javascript"></script>
    <link rel="stylesheet" href="__CSS__/hotel/jquery-ui.css" />
    <script src="__CSS__/hotel/jquery-ui.js"></script>
    <!--<script type="text/javascript" src="__JS__/jquery.flexisel.js"></script>-->
    <script>
        $(function() {
            $("#datepicker,#datepicker1").datepicker();
        });
    </script>
    <style>

        /* jssor slider arrow navigator skin 05 css */
        /*
        .jssora05l                  (normal)
        .jssora05r                  (normal)
        .jssora05l:hover            (normal mouseover)
        .jssora05r:hover            (normal mouseover)
        .jssora05l.jssora05ldn      (mousedown)
        .jssora05r.jssora05rdn      (mousedown)
        */
        .jssora05l, .jssora05r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 40px;
            cursor: pointer;
            background: url('img/a17.png') no-repeat;
            overflow: hidden;
        }
        .jssora05l { background-position: -10px -40px; }
        .jssora05r { background-position: -70px -40px; }
        .jssora05l:hover { background-position: -130px -40px; }
        .jssora05r:hover { background-position: -190px -40px; }
        .jssora05l.jssora05ldn { background-position: -250px -40px; }
        .jssora05r.jssora05rdn { background-position: -310px -40px; }

        /* jssor slider thumbnail navigator skin 01 css */
        /*
        .jssort01 .p            (normal)
        .jssort01 .p:hover      (normal mouseover)
        .jssort01 .p.pav        (active)
        .jssort01 .p.pdn        (mousedown)
        */
        .jssort01 .p {
            position: absolute;
            top: 0;
            left: 0;
            width: 72px;
            height: 72px;
        }

        .jssort01 .t {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .jssort01 .w {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

        .jssort01 .c {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 68px;
            height: 68px;
            border: #000 2px solid;
            box-sizing: content-box;
            background: url('img/t01.png') -800px -800px no-repeat;
            _background: none;
        }

        .jssort01 .pav .c {
            top: 2px;
            _top: 0px;
            left: 2px;
            _left: 0px;
            width: 68px;
            height: 68px;
            border: #000 0px solid;
            _border: #fff 2px solid;
            background-position: 50% 50%;
        }

        .jssort01 .p:hover .c {
            top: 0px;
            left: 0px;
            width: 70px;
            height: 70px;
            border: #fff 1px solid;
            background-position: 50% 50%;
        }

        .jssort01 .p.pdn .c {
            background-position: 50% 50%;
            width: 68px;
            height: 68px;
            border: #000 2px solid;
        }

        * html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
            /* ie quirks mode adjust */
            width /**/: 72px;
            height /**/: 72px;
        }

    </style>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;">

<div class="fh5co-loader"></div>

<div id="page">
    <nav class="fh5co-nav" role="navigation">
        <div class="container">
            <div class="row">
                <div class="left-menu text-right menu-1">
                    <ul>
                        <li class="has-dropdown">
                            <a href="">旅行吧、骚年！</a>
                            <ul class="dropdown">
                                <li><a href="{:url('Tourism/tourism')}">景点</a></li>
                                <li><a href="{:url('Tourism/tourism_route')}">路线</a></li>
                                <li><a href="{:url('Tourism/tourism_guide')}">导游</a></li>
                                <li><a href="{:url('Tourism/agritainment')}">农家乐</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="{:url('Hotel/index')}">酒店</a>
                        </li>
                        <li><a href="{:url('Specialty/index')}">吃货世界</a></li>
                    </ul>
                </div>
                <div class="logo text-center">
                    <div id="fh5co-logo"><a href="{:url('Index/index')}">坪行網</a></div>
                </div>
                <div class="right-menu text-left menu-1">
                    <ul>
                        <li><a href="http://www.12306.cn/mormhweb/">在线票务</a></li>
                        <li><a href="{:url('About/index')}">关于我们</a></li>
                        <li><a href="{:url('Personal/index')}">个人中心</a></li>
                        <li>
                            {$username}
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </nav>
    <header id="fh5co-header" class="fh5co-cover" role="banner">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 text-center">
                    <div class="display-t">
                        <div class="display-tc animate-box" data-animate-effect="fadeIn">
                            <h1>欢迎来到平行生态旅游网</h1>
                            <div class="row">
                                <form class="form-inline" id="fh5co-header-subscribe">
                                    <div class="col-md-6 col-md-offset-3">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="email" placeholder="请输入您的电子邮箱" style="height: 55px">
                                            <button type="submit" class="btn btn-default">现在加入</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    {volist name='list' id='list'}
    <!--订单内容-->
    <div class="container ">
        <div class="row">
            <div  class="tab-content col-xs-12 col-sm-6">
                <div id="jssor_1" style="position: relative; margin: 0 auto; top: 10px; left: -15px; width: 800px; height: 456px; overflow: hidden; visibility: hidden; background-color: #24262e;">
                    <!-- Loading Screen -->
                    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
                        <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                        <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
                    </div>
                    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 356px; overflow: hidden;">
                        <div data-p="144.50" style="display: none;">
                            <img data-u="image" src="__UPLOADS__/{$li[$key]['img'][0]}" />
                            <img data-u="thumb" src="__UPLOADS__/{$li[$key]['img'][0]}" />
                        </div>
                        <div data-p="144.50" style="display: none;">
                            <img data-u="image" src="__UPLOADS__/{$li[$key]['img'][1]}" />
                            <img data-u="thumb" src="__UPLOADS__/{$li[$key]['img'][1]}" />
                        </div>
                        <div data-p="144.50" style="display: none;">
                            <img data-u="image" src="__UPLOADS__/{$li[$key]['img'][2]}" />
                            <img data-u="thumb" src="__UPLOADS__/{$li[$key]['img'][2]}" />
                        </div>
                        <div data-p="144.50" style="display: none;">
                            <img data-u="image" src="__UPLOADS__/{$li[$key]['img'][3]}" />
                            <img data-u="thumb" src="__UPLOADS__/{$li[$key]['img'][3]}" />
                        </div>
                    </div>
                    <div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:800px;height:100px;" data-autocenter="1">
                        <div data-u="slides" style="cursor: default;">
                            <div data-u="prototype" class="p">
                                <div class="w">
                                    <div data-u="thumbnailtemplate" class="t"></div>
                                </div>
                                <div class="c"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div  class="tab-content  col-xs-12 col-sm-6"><br/>
                <h1 id="name1">{$list.name}</h1><br/>
                <div style="background:oldlace;font: 1.5rem 微软雅黑 bold ">
                    <span>　路线价格：￥<span  id="price" style="font: 2rem  微软雅黑 bold ;color:orangered ">{$list.amounts}</span>元/人起</span>(儿童半价)<br/>
                    <span>　发团时间：提前2天电话确认..</span><br/>
                    <span>　产品编号 :<span style="font: 20px 微软雅黑 bold"> 6546328<span id="uid">{$list.id}</span></span></span><br/>
                    <span>　景区详情：{$list.introduce}</span><br/>
                    <span>　满意度：<span style="color: red">94%</span>　　　　　　<a style="color:orangered" >20条评论</a></span><br/>
                </div>
            </div>
        </div>

    </div>




    <!--出发-->
    <div class=" container">
        <div class="row">
            <div class="col-xs-12 col-sm-12"  style="border: 2px solid #f79d3c;margin-top: 50px;background-color: #FFFCF4">
                <div class=" container" style="height: 100px">
                    <div class="row">
                        <br/>
                        <div class="col-xs-12 col-sm-4">
                            <span style="color: #0099FF;font-size: 0.75rem;">出发：</span>
                            <span class="book_date" style="display: inline-block">
                            <input class="date" id="datepicker" type="text" name="date_time" value="DD/MM/YY" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'DD/MM/YY';}">
                            </span>
                        </div>
                        <div  class="col-xs-12 col-sm-5" style="margin-top: 15px">
                            <span style="color: #0099FF;font-size: 0.75rem;" > 成人:　 </span>
                                <span class="quantity">
                                    <input id="quantity1" value="" onblur="total(1);"  style="height: 30px;width: 30px" type="text"/>
                                 </span>
                                <span class="price">
                                     <input type="hidden" id="price1" value="{$list.amounts}" />
                                </span>
                                <span class="total">
                                    <span id="smallTotal1" style="display: none"></span>
                                </span>
                            <span style="color: #0099FF;font-size: 0.75rem;" >小孩: </span>
                                <span class="quantity" >
                                <input id="quantity2" value="" onblur="total(2);" style="height: 30px;width: 30px" type="text"/>
                                </span>
                                <span class="price">
                                     <input type="hidden" id="price2" value="{$list.amounts}"  />
                                </span>
                                 <span class="total">
                                    <span id="smallTotal2" style="display: none"></span>
                                </span>
                            <a >2-8周岁（不含）</a>
                                <span>
                                     <span class="red">总价：￥<span id="total"  name="total" style="color: coral;font: 2rem  微软雅黑 bold  ">0.00</span></span>
                                </span>
                        </div>
                        <div class="col-xs-12 col-sm-3 ">
                            <button id="TJ" style="width: 100px;height: 30px; font-size: 1rem;background: #fa8721;display: inline-block;border: 0px solid #fa8721;color: white;margin-top: 15px"> 开始预定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" container">
        </div>
    </div>
    {/volist}
    <h1>路线详情图</h1>
    <div class=" container">
        <div class="row">
            <div class="col-xs-12 col-sm-12">
                <img src="__UPLOADS__/{$li[$key]['img'][0]}" class="img-responsive" alt="Cinque Terre">
                <img src="__UPLOADS__/{$li[$key]['img'][1]}" class="img-responsive" alt="Cinque Terre">
                <img src="__UPLOADS__/{$li[$key]['img'][2]}" class="img-responsive" alt="Cinque Terre">
                <img src="__UPLOADS__/{$li[$key]['img'][3]}" class="img-responsive" alt="Cinque Terre">
            </div>
        </div>
    </div>
</div>
<div id="fh5co-started">
    <div class="container">
        <div class="row animate-box">
            <div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
                <h2>酒店</h2>
                <p>四川.成都.成都生态旅游网  CopyRight ©2012-2021 版权所有  咨询电话:028-61765827  028-56468785  18580353587   24小时热线:13852320605 生态QQ客服1 :2009456360   生态QQ客服2:460498892   生态QQ客服3 :368533622</p>
            </div>
        </div>
        <div class="col-md-12 text-center">
            <p>
            <ul class="fh5co-social-icons">
                <li><a href="#"><i class="icon-twitter"></i></a></li>
                <li><a href="#"><i class="icon-facebook"></i></a></li>
                <li><a href="#"><i class="icon-linkedin"></i></a></li>
                <li><a href="#"><i class="icon-dribbble"></i></a></li>
            </ul>
            </p>
        </div>
    </div>
</div>
<script src="__JS__/index/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<!--<script src="__JS__/index/bootstrap.min.js"></script>-->
<!-- Waypoints -->
<script src="__JS__/index/jquery.waypoints.min.js"></script>
<!-- Main -->
<script src="__JS__/index/main.js"></script>
<script>

    function total(id)
    {
        /*计算单个的价格*/
        var quantity=document.getElementById("quantity"+id).value;
        var price=document.getElementById("price"+id).value;
        var smallTotal=quantity*price;
        var smallT=document.getElementById("smallTotal"+id);
        smallT.innerHTML=smallTotal;


        /*计算总价格*/
        var totalPrice=0;
        for(var a=1;a<3;a++){
            if(a==2){
                var quantity=document.getElementById("quantity"+a).value;
                var price=document.getElementById("price"+a).value;
                var smallTotal=quantity*price*0.5;
            }else{
                var quantity=document.getElementById("quantity"+a).value;
                var price=document.getElementById("price"+a).value;
                var smallTotal=quantity*price;
            }
            totalPrice=totalPrice+smallTotal;
        }

        var total=document.getElementById("total");
        total.innerHTML=totalPrice;
    }


    $(function(){
        $('#TJ').click(function() {
//        alert($('#total').text());
            $.ajax({
                url: "{:url('Tourism/order')}",
                type: "post",
                dataType: 'json',
                data: {
                    route_id:$('#uid').text(),
                    route_name:$('#name1').text(),
                    time:$('#datepicker').val(),
                    adult:$('#quantity1').val(),
                    child:$('#quantity2').val(),
                    price:$('#price').text(),
                    amounts:$('#total').text()
                },
                success: function (data) {
                    if(data==true){
                        window.location.href="{:url('Tourism/order_1')}"
                    }else{
                        window.location.href="{:url('Tourism/order_3')}"
                    }
                }

            })
        })
    })







    jQuery(document).ready(function ($) {

        var jssor_1_SlideshowTransitions = [
            { $Duration:1200,x:0.3,$During:{ $Left:[0.3,0.7]},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:-0.3,$SlideOut:true,$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:-0.3,$During:{ $Left:[0.3,0.7]},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,$SlideOut:true,$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$During:{ $Top:[0.3,0.7]},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:-0.3,$SlideOut:true,$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:-0.3,$During:{ $Top:[0.3,0.7]},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$SlideOut:true,$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,$Cols:2,$During:{ $Left:[0.3,0.7]},$ChessMode:{ $Column:3},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{ $Column:3},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$Rows:2,$During:{ $Top:[0.3,0.7]},$ChessMode:{ $Row:12},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{ $Row:12},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$Cols:2,$During:{ $Top:[0.3,0.7]},$ChessMode:{ $Column:12},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{ $Column:12},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,$Rows:2,$During:{ $Left:[0.3,0.7]},$ChessMode:{ $Row:3},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{ $Row:3},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{ $Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{ $Column:3,$Row:12},$Easing:{ $Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{ $Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{ $Column:3,$Row:12},$Easing:{ $Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{ $Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{ $Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{ $Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{ $Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
        ];
        var jssor_1_options = {
            $AutoPlay: true,
            $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
            },
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
            },
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $Cols: 10,
                $SpacingX: 8,
                $SpacingY: 8,
                $Align: 360
            }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizing
        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 800);
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>
</body>
</html>

